<template>
  <div>
    <!-- banner -->
    <div class="banner" :style="cover">
      <h1 class="banner-title">个人归档</h1>
    </div>
    <!-- 归档列表 -->
    <v-card class="blog-container">
      <el-timeline>
        <el-timeline-item v-for="(item, index) in archiveList" :key="item.articleId"
                          :timestamp="item.createTime"
                          placement="top">
          <el-card>
            <div style="width: 100%">
            <h4>
              <span :title="item.title"
                    style=" display :inline-block ;width: 100%;overflow: hidden;textOverflow: ellipsis;whiteSpace: nowrap">
                {{ item.title }}
              </span>
            </h4>
            </div>
            <p>
              <router-link :to="'/user/' + item.authorId" tag="a" target="_blank">
                <span style="color: #005cc5">{{ item.authorName }}</span>
              </router-link>
              创建于 {{ item.createTime }}
            </p>
          </el-card>
        </el-timeline-item>
      </el-timeline>
      <!-- 文章分页按钮 -->
      <v-pagination v-if="count > 0"
                    color="#00C4B6"
                    v-model="current"
                    :length="Math.ceil(count / param.pageSize)"
                    total-visible="7" style="margin-top: 20px;"
      />
    </v-card>
  </div>
</template>

<script>
import { Timeline, TimelineItem, TimelineTitle } from "vue-cute-timeline";
import { getUserArticle } from "../../api/article";
import { userinfo } from "../../api/user";
export default {
  created() {
    this.listArchives();
    this.fetchUserInfo();
  },
  components: {
    Timeline,
    TimelineItem,
    TimelineTitle
  },
  data: function() {
    return {
      count: 0,
      current: 1,
      archiveList: [],
      param: {
        pageNo: 1,
        pageSize: 5,
        status: 3, // 只查询已发布的文章
        userId: this.$route.params.userId
      },
      userHomepageCover: ""
    };
  },
  methods: {
    // 获取归档数据
    listArchives() {
      this.param.pageNo = this.current;
      getUserArticle(this.param).then(res => {
        const { code, data, message } = res;
        if (code === 200) {
          this.archiveList = data.list;
          this.count = data.total
        } else {
          this.$message.error(message);
        }
      })
    },

    // 获取用户信息
    fetchUserInfo() {
      userinfo(this.$route.params.userId).then(res => {
        const { code, data, message } = res;
        if (code === 200) {
          this.userHomepageCover = data.homepageCover;
        } else {
          this.$message.error(message);
        }
      })
    },
  },
  computed: {
    cover() {
      return "background: url(" + this.userHomepageCover + ") center center / cover no-repeat";
    }
  },
  watch: {
    current(value) {
      this.current = value;
      this.listArchives();
    }
  }
};
</script>

<style scoped>
.time {
  font-size: 0.75rem;
  color: #555;
  margin-right: 1rem;
}
</style>
